<template>
<div id="searchlist" class="search" style="width:100%">
  <div style="height:1rem;width:90%;float:left;">
    <search
      position="fixed"
      top="0"
      ref="search"
      v-model="condition"
      @on-change="onSubmit"
      @on-cancel="onCancel"
      action="#"
      ></search>
    </div>
    <div @click="filter" class="filterbtn">筛选</div>
    <div class="clearfloat" style="clear:both"></div>
    <div v-transfer-dom>
      <popup v-model="show" position="right" style="background:#fff;">
        <div style="width:100%;">
          <div class="timeBox">
            <group title="时间">
              <calendar class="openbox" v-model="begindata" title="开始日期"></calendar>
              <pre></pre>
              <calendar class="openbox" v-model="enddata" title="结束日期"></calendar>
           </group>
          </div>
          <group title="地址" class="addressbox" style="margin-top:30px;">
              <x-address
                title="地址"
                v-model="address"
                :list="addressData"
                @on-shadow-change="getAddress"
                @on-show="initxAddress"
             >
           </x-address>
           </group>
          <group title="状态" style="margin-top:30px;">
            <div class="checkerBox">
              <checker
              v-model="state"
              default-item-class="demo-item"
              selected-item-class="demo-item-selected"
              >
                <checker-item v-for="(item,index) in stateData" :key="index" :value="item.value">{{item.name}}</checker-item>
              </checker>
            </div>
             </group>
              <div class="btnBox">
                <span class="cancel btn" @click="cancel">重置</span>
                <span class="sure btn" @click="onSubmit">确定</span>
              </div>
        </div>
      </popup>
    </div>

</div>
</template>
<script type="text/ecmascript-6">
import address from '@/components/index/address'
import { Checker, Calendar, XAddress, CheckerItem, Group, TransferDom, Search, Popup } from 'vux'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      stateData: [
        {
          name: '未审核',
          value: '0'
        },
        {
          name: '通过',
          value: '1'
        },
        {
          name: '未通过',
          value: '2'
        }
      ],
      condition: '',
      begindata: '',
      enddata: '',
      address: [], // 存地址
      addressData: address,
      show: false,
      state: null,
      isInit: false
    }
  },
  created () {

  },
  methods: {
    filter () {
      this.show = true
    },
    onSubmit () {
      this.show = false
      const {condition, begindata, enddata, state, address} = this
      this.$emit('search', {condition, begindata, enddata, state, address})
    },
    onCancel () {
      this.$router.go(0)
    },
    initxAddress () {
      this.isInit = true
    },
    getAddress (ids, names) {
      if (!this.isInit) {
        return
      }
      this.address = names
    },
    cancel () {
      this.condition = ''
      this.begindata = ''
      this.enddata = ''
      this.address = [] // 存地址
      this.state = null
      this.$emit('remove')
    }
  },
  components: {
    XAddress, Search, Popup, Calendar, Group, Checker, CheckerItem
  }
}
</script>
<style>
body .v-transfer-dom .vux-popup-bottom{
  z-index: 600;
}
body .v-transfer-dom .vux-popup-dialog .addressbox .vux-cell-box .vux-cell-primary{
  font-size: 16px;
  width:100%;
}
body .v-transfer-dom .vux-popup-dialog .addressbox .vux-cell-box .vux-popup-picker-select{
 width: 100%!important
}
body .v-transfer-dom .vux-popup-dialog .addressbox .vux-cell-box .vux-cell-value{
  font-size: 12px;
  display: inline-block;
}
body .v-transfer-dom .vux-popup-dialog.vux-popup-right {
  left: 20%;
}
body .v-transfer-dom .weui-cells__title{
  padding-left: 0px;
  font-size: 16px;
  background: #eee;
  color: #666;
  height: 40px;
  line-height: 40px;
  margin-top: 0px;
  text-indent: 10px;
}
body .v-transfer-dom .weui-cell{
  text-indent: 10px;
}
body .v-transfer-dom .weui-cells:before{
  border: none;
}
body .v-transfer-dom .weui-cells:after{
  border: none;
}
body .v-transfer-dom  .weui-label{
  font-size: 12px;
}
body .v-transfer-dom .weui-cells .vux-calendar:before{
  border: none;
}
body .vux-popup-mask{
  background: rgba(0, 0, 0, 0.5)
}
</style>

<style scoped>
.filterbtn{
  width:10%;
  float:right;
  height:44px;
  line-height:43px;
  color:rgb(6, 190, 182);
  background-color:#EFEFF4;
  border-bottom: 1px solid #D7D6DC;
}
.demo-item {
  width: 70px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  background-color: #fff;
  color:#2c3e50;
  margin: 5px 2px;
  font-size:12px;
}
.demo-item-selected {
  background: #06beb6;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #48b1bf, #06beb6);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #48b1bf, #06beb6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color:#fff;
  border: 1px solid #fff;

}
.cancel{
  color:grey;
}
.openbox{
  font-size: 12px;
}
.checkerBox{
  margin-top: 10px;
}
.vux-checker-box{
  padding-left: 10px;
}
.btnBox{
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  text-align:center;
  font-size:16px;
  position:absolute;
  bottom: 0;
  display: flex;
}
.btnBox .btn{
  flex: 2;
}
.cancel{
  background: #eee;
  color: #666;
}
.sure{
  background: rgb(90,185,182);
  color: #fff;
}
</style>
